<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>用户首页</title>
    <link href="css/index.css" rel="stylesheet">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>

<div id="app">
    <template>

        <el-form :inline="true" class="demo-form-inline">
               <el-button type="info" @click="insert()" plain>添加用户</el-button>
               <el-button type="info" @click="batchDelete()" plain>批量删除</el-button>
               <!--模糊查询-->
               <el-input v-model="input"  placeholder="请输入姓名关键字" style="width: 20%"></el-input>
               <el-button type="primary" icon="el-icon-search" v-on:click="select()">搜索</el-button>
               <!--下拉框查询-->
            <el-form-item >
                <el-select v-model="status" placeholder="请选择状态">
                    <el-option label="已认证" value="0"></el-option>
                    <el-option label="未认证" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="status1()">查询</el-button>
            </el-form-item>
            </el-form>
        <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">

                <el-table-column
                        type="selection"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="stuno"
                        label="学号"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="password"
                        label="密码"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="sname"
                        label="状态"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="stuname"
                        label="名字"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="住址"
                        width="150">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
                        <el-button @click="selectRemark(scope.row.id)" type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
    </template>
    <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    <el-dialog
                title="编辑信息"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form :model="studentForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称" prop="stuname">
                    <el-input v-model="studentForm.stuname"></el-input>
                </el-form-item>
                <el-form-item label="学号" prop="stuno">
                    <el-input v-model="studentForm.stuno"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="studentForm.password"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="studentForm.address"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="studentForm.status" placeholder="请选择状态">
                        <el-option value="0" label="已认证"></el-option>
                        <el-option value="1" label="未认证"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="primary"  @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    <el-dialog
                title="详情信息"
                :visible.sync="dialogVisible2"
                width="30%"
                :before-close="handleClose">
            <template>
                <el-table
                        :data="from"
                        style="width: 100%">
                    <el-table-column
                            prop="remark"
                            label="人物简介"
                            width="440">
                    </el-table-column>
                </el-table>
            </template>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary"  @click="submitForm2()">确 定</el-button>
            </span>
        </el-dialog>

</div>
</body>
</html>

<script type="text/javascript">
    //表单验证
    var rules={
        stuname: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        status: [
            { required: true, message: '请选择状态', trigger: 'change' }
        ],
        // create_date: [
        //     { type: 'date', required: true, message: '请选择上架日期', trigger: 'change' }
        // ],
        password: [
            { required: true, message: '请填写密码', trigger: 'blur' }
        ],
        // sex: [
        //     { required: true, message: '请填写性别', trigger: 'blur' }
        // ]

    };
    var vm=new Vue({
        el:'#app',
        data:{
            rules:rules,
            input:'',
            tableData:[],
            dialogVisible: false,
            dialogVisible2:false,
            studentForm:{},
            // 分页相关的数据
            currentPage:1,
            pageSizes:[5,10,15],
            pageSize:5,
            total:0,
            imageUrl: '',
            multipleSelection: {},
            status:'',
            from:{},
            activeName:{}
        },
        mounted:function(){
            this.initData(1,this.pageSize);

        },
        methods: {
            initData: function (pageNumber, pageSize) {
                axios.get('/student/listAll', {
                    params: {
                        pageNumber: pageNumber,
                        pageSize: pageSize,
                        stuname:this.input,
                        status:this.status
                    }
                }).then((res) => {
                    this.tableData = res.data.list
                    this.total=res.data.total;
                    //给页码赋值
                    this.currentPage=res.data.pageNum
                }).catch((error) => {
                    alert(error)
                })
            },
            insert:function () {
                this.dialogVisible=true
            },
            update:function (res) {
                this.dialogVisible=true;
                this.studentForm=res
            },
            select:function(){
                this.initData(1,this.pageSize);
            },
            status1:function(){
                this.initData(1,this.pageSize);
            },
            selectRemark:function(val){
                axios.get('/student/selectRemark',{
                    params: {
                        id:val
                    }
                }).then((res)=>{
                    this.from=res.data;
                    console.log(res.data);
                    console.log(this.from);
                    this.dialogVisible2=true;
                }).catch((error)=>{
                    alert(error)
                })
            },
            // 页码改变时触发的函数
            handleCurrentChange: function (val) {
                // 重新加载数据
                this.initData(val,this.pageSize);
                // 修改当前页码的值
                this.currentPage = val;
                console.log(val)
            },
            handleSizeChange: function (val) {
                // 每页条数改变时默认加载第一页的数据
                this.initData(1,val);
                // 重新指定每页条数
                this.pageSize = val;
            },
            // 模态框提交函数
            submitForm: function (formName) {
                this.$refs[formName].validate((valid) => {
                    // valid :内部控制的验证通过的参数：true 验证通过 false 验证不通过
                    if (valid) {
                        // 异步提交表单数据
                        axios.post('/student/insertOrUpdate',this.studentForm).then((res) => {
                            console.log(this.studentForm);
                            var result = res.data;
                            if (result>0){
                                this.$message({
                                    showClose: true,
                                    message: '恭喜你，操作成功',
                                    type: 'success'
                                });
                                // location.reload();
                                this.initData(1,this.pageSize);
                            }
                        }).catch(function (error) {
                            this.$message.error('操作失败');
                        })
                        this.dialogVisible = false
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            handleSelectionChange:function (val) {
                this.multipleSelection=val;
            },
            batchDelete:function () {
                axios.post('/student/batchDelete',this.multipleSelection).then((res)=>{
                    var result = res.data;
                    if (result>0) {
                        this.$message({
                            showClose: true,
                            message: '恭喜你，操作成功',
                            type: 'success'
                        });
                    }
                    this.initData(1,this.pageSize);
                }).catch((error)=>{
                    alert(error)
                })
            },
            submitForm2:function () {
                this.dialogVisible2=false
            }
        }


    })
</script>